<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testpdf</title>
    <script src="./build/pdf.js"></script>
    <script src="./build/pdf.worker.js"></script>

</head>


<body>
    <canvas id="myCanvas"></canvas>
    <h5>方式一 window.open(); 其实就是相当于在地址栏直接输入地址访问</h5>
    <button onclick="openpdf()">open</button>

    <h5>方式二 a标签 其实就是相当于在地址栏直接输入地址访问</h5>
    <a href="test.pdf" target="_blank">open</a> <a href="pdf/" target="_blank">open目录(在web容器中不好使，本地好使)</a>

    <h5>方式三 iframe标签 IE不支持</h5>
    <iframe src="test.pdf" width="800" height="600"></iframe>

    <h5>方式四 object标签 IE支持</h5>
    <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="600" border="0">

        <param name="SRC" value="test.pdf">

    </object>
    <script>



        function openpdf() {

            window.open("test.pdf");
        }

        var loadingTask = pdfjsLib.getDocument(data)
        loadingTask.promise.then(function (pdf) {
            for (var i = 1; i <= pdf.numPages; i++) {
                pdf.getPage(1).then(function (page) {
                    var scale = 2
                    var viewport = page.getViewport({ scale: scale })

                    var canvas = document.getElementById('myCanvas')
                    var context = canvas.getContext('2d')
                    canvas.height = viewport.height
                    canvas.width = viewport.width

                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport,
                    };
                    page.render(renderContext);
                })
            }
        });

    </script>
</body>

</html>